<script setup>

import {successCode} from "@/api/httpApi/base/http.js";
import {onMounted, ref, watch} from "vue";
import MyTable from "@/components/constant/myTable.vue";
import {getSettingList, getWebTitle, updateSetting} from "@/api/httpApi/webInfoApi.js";
import {constantStore} from "@/stores/constantStore.js";
import FromItemPlus from "@/components/constant/fromItemPlus.vue";
import {error} from "@/api/myMessage.js";

onMounted(() => {
  initWebInfo();
})

let webInfoList = ref([]);

function initWebInfo() {
  getSettingList().then((res) => {
    if (res.code === successCode) {
      webInfoList.value = res.data;
    }
  })
}

function editWebInfo() {
  getWebTitle().then(res => {
    if (res.code === successCode) {
      let infoObj = res.data;
      constantStore().setWebTitle(infoObj["web_title"]);
    }
  })
  initWebInfo();
}

function updateWebInfo(index) {
  updateSetting(webInfoList.value[index]).then(res => {
    if (res.code === successCode) {
      editWebInfo()
    } else {
      error(res.message);
    }
  })
}

const mapShow = ref(true);
/**
 * 初始化相关
 */
let webInfoMapping = [
  {
    label: "ID",
    prop: "id",
    propConfig: {
      align: "center",
      width: "180",
      type: "text",
    },
  },
  {
    label: "设置名称",//表头名称 必填
    prop: "name",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    }
  },
  {
    label: "配置",
    prop: "value",
    propConfig: {
      align: "center",
      width: "120",
      type: "text",
      fixed: 'left',//固定列的位置
    },
    editHandle: "update",//出现在编辑中的操作 必填  添加有，
    editTypeConfig: {
      labelWidth: "100",
      editType: "text"
    },
  },
  {
    label: "关键字标志",//表头名称 必填
    prop: "key",//数据对应字段 必填
    propConfig: {
      align: "center",//对齐方式 非必填 不写默认左对齐
      type: "text",// 非必填 不写默认text   text(文本) selectText(根据给定列表，选择内容)  tag(标签)  Switch(开关)  image(图片)
      fixed: 'left',//固定列的位置
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "最近修改时间",
    prop: "updateTime",
    propConfig: {
      align: "center",
      width: "200",
      type: "text",
    },
  },
  {
    label: "备 注",
    prop: "remarks",
    propConfig: {
      align: "center",
      width: "400",
      type: "text",
    },
    editHandle: "update",//出现在编辑中的操作 必填  添加有  修改有，
    editTypeConfig: {
      editType: "text", //编辑框类型，非必填 默认text 文本类型  支持图片类型（image） 选择框（select），
      editTextType: "text",
      require: true,
      labelWidth: "100"
    },
  },
]
</script>


<template>
  <div class="webInfo-box">
    <div class="webInfo-btn-box">
      <el-button type="primary" v-if="mapShow" @click="mapShow =!mapShow">详细信息</el-button>
      <el-button type="primary" v-else @click="mapShow =!mapShow">返 回</el-button>
    </div>
    <div class="webInfo-table-box" v-if="!mapShow">
      <my-table :data-list="webInfoList"
                @after-edit="editWebInfo()"
                :updateAction="(setting) => { return updateSetting(setting)}"
                title="网站设置"
                :btn-config="{add:false,update:false,del:false}"
                :mapping="webInfoMapping"/>
    </div>
    <div class="webInfo-form-box" v-else>
      <el-form label-width="auto" style="max-width: 600px">
        <el-form-item :label="item.name" v-for="(item,index) in webInfoList">
          <from-item-plus v-model="item.value" :type="item.type" @update="updateWebInfo(index)"/>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped lang="scss">

.webInfo-box {
  .webInfo-btn-box {
    display: flex;
    align-items: center;
    padding: 2rem 1rem;
    margin: 1rem 0;
    border-bottom: #CDD0D6 dashed .2rem;
  }

  .webInfo-form-box {
    margin: 2rem 3rem;

    :deep(.el-form-item) {
      align-items: center;
    }
  }
}
</style>